<template>
  <view class="custom-navbar" :style="{paddingTop:safeArea?.top + 'px'}">
    <!-- logo文字 -->
     <view class="logo">
      <image class="logo-image" src="@/static/images/logo.png"></image>
      <text class="logo-text">新鲜 · 亲民 · 快捷</text>
     </view>

     <!-- 搜索条 -->
      <view class="search">
        <!-- icon-开头的，都是字体图标 -->
        <text class="icon-search">搜索商品</text>
        <text class="icon-scan"></text>
      </view>
  </view>
</template>
<script setup lang="ts">

// const { safeAreaInsets} =uni.getSystemInfoSync()
// {top: 44, left: 0, right: 0, bottom: 0}
const { safeArea } = uni.getWindowInfo() 
console.log('安全区域边界safeAreaInsets--new：',safeArea);

</script>
<style lang="scss">

.custom-navbar{
  background: url(@/static/images/navigator_bg.png);
  // background-size: cover;
  // display: flex;

  padding: 20rpx 30rpx 16rpx;

  .logo{
    display: flex;
    height: 64rpx;
    align-items: center;
    .logo-image{
      height: 39rpx;
      width: 166rpx;
    }
    .logo-text{
      color: #fff;
      margin-left: 20rpx;
      padding-left: 20rpx;
      border-left: 1rpx solid #fff;
      font-size: 26rpx;
    }
  }

  .search{
    display: flex;
    justify-content: space-between;
    align-items: center;

    color: #fff;
    background-color: rgba(255, 255, 255, 0.5);

    font-size: 28rpx;
    border-radius: 32rpx;
    height: 64rpx;
    padding: 0 10rpx 0 26rpx;

    .icon-search {
      &::before {
        margin-right: 10rpx;
      }
    }
    .icon-scan {
      font-size: 30rpx;
      padding: 15rpx;
    }
  }
}
</style>
